<template>
  <view>
    <u-sticky offset-top="1">
      <u-tabs :list="stolist" :current="current" @click="selectStatues"></u-tabs>
    </u-sticky>

    <view class="search">
      <u-search class="left" placeholder="请输服务类型名称" @change="selectcard" :bgColor="searchstyle"
        :borderColor="borderstyle" :showAction="false" v-model="keyword"></u-search>
      <view class="backtop">
        <u-button type="primary" @click="topback" class="custom-style" :plain="true" size="mini" text="刷新"></u-button>
      </view>
    </view>

    <view v-if="empty == 'isempty'" class="empty">
      <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
      </u-empty>
    </view>
    <view class="section">
      <u-list :scrollTop="60" height="620" :style="height" :enableBackToTop="true" v-if="empty == 'notempty'"
        :preLoadScreen="page * 5" @scrolltolower="scrolltolower" :pagingEnabled="true">
        <u-list-item v-for="item in carwashtypelist" :key="item.id">
          <u-swipe-action>
            <u-swipe-action-item @click="action" :name="item.id" :options="options">
              <view class="card" @click="toEdit(item.id)">
                <view class="left">
                  <view class="img">
                    <u-image :src="item.image_text" width="80px" height="80px">
                      <template v-slot:loading>
                        <u-loading-icon color="red"></u-loading-icon>
                      </template>
                    </u-image>
                  </view>
                </view>
                <view class="right">
                  <view class="text flax">
                    <h5>类别标题:</h5>
                    <span class="flax-span">{{ item.name }}</span>
                  </view>

                  <view class="text">
                    <span>创建时间:</span>
                    <span>{{ item.createtime_text }}</span>
                  </view>
                  <span class="btn_edit">
                    <u-tag @click="toeditcarwashtype(item.id)" text="可修改" plain size="mini"></u-tag>
                  </span>
                </view>
              </view>
            </u-swipe-action-item>
          </u-swipe-action>
        </u-list-item>

        <u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
          :nomore-text="nomoreText" />
      </u-list>
      <view class="btnstyle">
        <u-button type="primary" class="custom-style" @click="addservicetype" text="添加服务分类"></u-button>

      </view>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>

    <!-- 模态框 -->
    <u-modal :show="show" :content="content" showCancelButton @confirm="confirm" @cancel="cancel" />
    <u-modal :show="show1" :content="content1" showCancelButton @confirm="confirm1" @cancel="cancel1" />
  </view>
</template>

<script>
export default {
  onLoad(option) {
    this.auth = this.$u.auth.check();
    this.stoid = this.auth.stoid ? this.auth.stoid : 0;
    this.current = parseInt(this.stoid);
    this.getstorelist();
    this.list();
  },
  created() {
    this.timer = setInterval(() => {
      let a = this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      status: "loading",
      loadingText: "努力加载中",
      loadmoreText: "下拉加载更多",
      nomoreText: "没有更多数据了",
      serverType: "",
      current: 0,
      padding: "150rpx 0rpx",
      storelist: [],
      options: [
        {
          text: "隐藏",
          style: {
            backgroundColor: "#f9ae3d",
          },
        },
        {
          text: "销毁",
          style: {
            backgroundColor: "#f56c6c",
          },
        },
      ],
      content: "是否销毁该服务分类（注意:销毁该分类，该分类的所有服务实例都将被销毁，谨慎操作）",
      content1: "是否隐藏该分类",
      auth: {},
      page: 1,
      carwashtypeid: 0,
      empty: "",
      stolist: [],
      stoid: 0,
      keyword: "",
      searchstyle: "#ffffff",
      borderstyle: "#eee",
      carwashtypelist: [],
      typeid: 0,
      show: false,
      show1: false,
    };
  },
  methods: {

    // 修改服务分类
    async toeditcarwashtype(e) {
      uni.$u.route({
        url: "/pagesC/product/gsservices/servicetype/edit",
        params: {
          carwashtypeid: e,
          stoid:this.stoid
        },
      });

    },
    async getstorelist() {
      let data = {
        adminid: this.auth.id,
        stoid: this.auth.stoid,
      };
      let result = await this.$u.api.product.storelist(data);

      if (result.code) {
        this.stolist = result.data;
        this.stoid = this.stolist[0]["id"];
        // console.log(this.stoid);
      }
    },
    addservicetype() {
      uni.$u.route({
        url: "/pagesC/product/gsservices/servicetype/add",
        params: {
          stoid: this.stoid,
        },
      });

    },
    action(item) {
      // 添加
      if (item.index == 0) {
        this.show1 = true;
        this.typeid = item.name;


      }
      // 销毁
      if (item.index == 1) {
        this.show = true;
        this.typeid = item.name;
      }
    },
    async confirm() {
      this.show = false;

      var data = {
        typeid: this.typeid,
        adminid: this.auth.id,
        stoid:this.stoid
      };

      var result = await this.$u.api.product.destroycarwashtype(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 2000,
          complete: () => {
            // //返回上一个界面
            // uni.reLaunch({
            // 	url: "/pagesC/product/gsservices/servicetype/index",

            // })

            uni.$u.route({
              url: "/pagesC/product/gsservices/servicetype/index",
              params: {
                stoid: this.stoid,
              },
            });
          },
        });
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
          duration: 2000,
        });
      }
    },
    async confirm1() {
      this.show1 = false;

      var data = {
        typeid: this.typeid,
        adminid: this.auth.id,
        stoid: this.stoid
      };

      var result = await this.$u.api.product.hidecarwashtype(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 2000,
          complete: () => {


            uni.$u.route({
              url: "/pagesC/product/gsservices/servicetype/index",
              params: {
                stoid: this.stoid,
              },
            });
          },
        });
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
          duration: 2000,
        });
      }
    },
    cancel() {
      this.show = false;
    },
    cancel1() {
      this.show1 = false;
    },


    selectcard(e) {
      this.carwashtypelist = [];

      this.page = 1;

      // 直接赋值
      this.keyword = e;
      // 然后调用
      this.list();
    },
    async list() {
      // 最高管理员需传输的数据
      let data = {
        stoid: this.stoid,
        page: this.page,
        keyword: this.keyword,
        adminid: this.auth.id,
        serverType: this.serverType,
      };
      var result = await this.$u.api.product.carwashtypelist(data);

      if (result.code) {
        this.empty = "notempty";

        if (Array.isArray(result.data) && result.data.length > 0) {
          this.carwashtypelist = this.carwashtypelist.concat(result.data);

          this.page++;
        } else {
          this.status = "nomore";
          // this.empty = "isempty"
        }
      }
    },

    async selectStatues(e) {
      this.carwashtypelist = [];
      this.page = 1;
      this.keyword = "";
      this.serverType = e.serverType;
      this.stoid = e.id;
      // console.log(this.stoid);
      this.list();
    },

    toEdit(typeid) {
      this.$u.route(`/pagesC/product/gsservices/servicelist/list`, {
        typeid: typeid,
      });
    },
    scrolltolower() {
      this.list();
    },
    async topback() {
      this.list(this.typeid);
    },
  },
};
</script>

<style scoped lang="scss">
.section {
  margin: 60px 0px;
}

.backtop {
  width: 20px;
  color: "blue";
  margin-left: 15px;
}

.empty {
  margin-top: 50px;
}

.search {
  width: 70%;
  position: fixed;
  top: 8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  left: 9%;
  z-index: 999;
}

.card {
  display: flex;
  width: 92%;
  height: 135px;
  margin: 0 auto;
  border-radius: 2%;
  border: 1px solid #eee;
  margin-top: 20px;
  box-shadow: 2px 2px 2px #eee, 2px 2px 2px #eee;

  .left {
    .img {
      padding: 22px;
    }
  }

  .right {
    position: relative;
    width: 62%;
    margin-top: 23px;

    .btn_edit {
      width: 50px;
      text-align: center;
      right: 50px;
      top: 70px;
      position: absolute;
    }

    .text {
      margin-top: 10px;

      h5 {
        // 超出一定长度变成三个点
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }

      span {
        font-size: 12px;
        color: #888;
      }

      span:nth-of-type(2) {
        padding-left: 10px;
      }
    }
  }
}

.content {
  background: #ffffff;
}

.flax {
  display: flex;
  align-items: center;

  .flax-span {
    font-size: 14px !important;
    color: #000 !important;
  }

}

// 固定定位
.btnstyle {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
</style>